<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://code4everything.gitee.io/repository/frontend/layui/layui/css/layui.css"  media="all">
</head>
<body>
        
<br/>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>批量上传文件</legend>
</fieldset> 
 
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> 
  <div class="layui-upload-list" style="max-width: 1000px;">
    <table class="layui-table">
      <colgroup>
        <col>
        <col width="150">
        <col width="260">
        <col width="150">
      </colgroup>
      <thead>
        <tr><th>文件名</th>
        <th>大小</th>
        <th>上传进度</th>
        <th>操作</th>
      </tr></thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>
  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div> 
 
<script src="http://code4everything.gitee.io/repository/frontend/layui/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['upload', 'element', 'layer'], function(){
  var $ = layui.jquery
  ,upload = layui.upload
  ,element = layui.element
  ,layer = layui.layer;
  
  var uploadListIns = upload.render({
    elem: '#testList'
    ,elemList: $('#demoList')
    ,url: '/wetool/file/upload'
    ,accept: 'file'
    ,multiple: true
    ,number: 9999999
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var that = this;
      var files = this.files = obj.pushFile();
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
          ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
          ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        tr.find('.demo-delete').on('click', function(){
          delete files[index];
          tr.remove();
          uploadListIns.config.elem.next()[0].value = '';
        });
        
        that.elemList.append(tr);
        element.render('progress');
      });
    }
    ,done: function(res, index, upload){
      var that = this;
      //if(res.code == 0){ //上传成功
        var tr = that.elemList.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(3).html(''); //清空操作
        delete this.files[index]; //删除文件队列已经上传成功的文件
        return;
      //}
      this.error(index, upload);
    }
    ,allDone: function(obj){ //多文件上传完毕后的状态回调
      console.log(obj)
    }
    ,error: function(index, upload){ //错误回调
      var that = this;
      var tr = that.elemList.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
    ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
      element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
    }
  });
});
</script>
</body>
</html>
